<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div>x: <input type="number" v-model="x" /></div>
      <div>y: <input type="number" v-model="y" /></div>
      <div>sub: {{ sub }}</div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
      const { createApp, computed, ref, watch } = Vue;

      const app = createApp({
        setup() {
          const x = ref(0);
          const y = ref(0);

          const sub = computed(() => {
            return x.value - y.value;
          });

          // ref
          watch(x, (newX, oldX) => {
            console.log("newX", newX);
            console.log("oldX", oldX);
          });

          // 计算属性 ref
          watch(sub, (newSub, oldSub) => {
            console.log("newSub", newSub);
            console.log("oldSub", oldSub);
          });

          // getter 函数
          watch(
            () => x.value + y.value,
            (newSum, oldSum) => {
              console.log("newSum", newSum);
              console.log("oldSum", oldSum);
            }
          );

          // 多个数据
          watch([x, () => y.value], ([newX, newY], [oldX, oldY]) => {
            console.log("[newX, newY]", [newX, newY]);
            console.log("[oldX, oldY]", [oldX, oldY]);
          });

          return {
            x,
            y,
            sub,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
